<template>
  <el-scrollbar>
    <div class="card-box" v-infinite-scroll="loadData" :infinite-scroll-disabled="disabled" :infinite-scroll-immediate="false">
      <el-card v-for="item in postpage" shadow="hover" :body-style="{ padding: '0px' }">
        <div class="header-info" :style="{ backgroundImage: `url(${item.pic})` }" @click="turnTo(item)">
          <span :style="{ opacity: '.6', fontSize: '12px' }">{{ item.createTime }}</span>
          <span :style="{
            fontSize: '18px',
            overflow: 'hidden',
            whiteSpace: 'nowrap',
            textOverflow: 'ellipsis',
          }">{{ item.title }}</span>
          <span :style="{ fontSize: '13px', opacity: '.8',margin: '20px 0' }">{{ item.major }}</span>
        </div>
        <div class="bottom-info">
          <div class="bottom-info-content">
            <div>
              <span class="span-box">贴</span>
              <span>发布人:{{ item.username }}</span>
            </div>
            <el-dropdown trigger="click" placement="top">
              <span>
                <el-icon size="20">
                  <IconPark :icon="More" />
                </el-icon>
              </span>
              <template #dropdown>
                <slot name="dropslot" :itemValue="item"></slot>
              </template>
            </el-dropdown>
          </div>
        </div>
      </el-card>
    </div>
    <div class="tips">
      <div v-if="loading" class="loadicon">
        <span>
          加载中
          <el-icon :size="25" class="loadAnimate">
            <IconPark :icon="LoadingOne" />
          </el-icon>
        </span>
      </div>
      <div v-if="disabled" class="loadicon">
        <span>
          <el-icon :size="20">
            <IconPark :icon="DisappointedFace" />
          </el-icon>
          ~没有更多帖子了~
        </span>
      </div>
    </div>
  </el-scrollbar>
</template>

<script setup lang="ts">
import IconPark from "@components/IconPark.vue";
import { useRouter } from "vue-router";
import { More, LoadingOne, DisappointedFace } from "@icon-park/vue-next";
import { onMounted } from "vue";
import { Tpost } from "@/models/post";

const emit = defineEmits(["loadData"]);
const { postpage, loading,disabled } = defineProps<{
  postpage: Array<Tpost>,
  loading: boolean,
  disabled: boolean
}>()

const router = useRouter();

const loadData = async () => {
  emit("loadData");
};

const turnTo = (item) => {
  router.push({
    name: "帖子详情",
    params: { postid: item.id }
  })
}

onMounted(() => {
  loadData();
})
</script>

<style scoped lang="less">
@import "../../assets/css/card.less";
</style>
